{include file="public/header" /}
<link href="__CSS__/plugins/iCheck/custom.css" rel="stylesheet">
<body class="gray-bg" id="container">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>每日订单统计</h5>

        </div>
        <div class="ibox-content">
            <!--搜索框开始-->
            <div class="row">
                <div class="col-sm-12">
                    <div class="table-responsive">
                        <div class="col-sm-12">
                            <div class="form">
                                <select name="course_id" id="" class="form-control layer-date">
                                    <option value="">-请选择课程-</option>
                                    {foreach $courseList as $vo}
                                        <option value="{$vo.id}">{$vo.title}</option>
                                    {/foreach}
                                </select>

                                <input readonly class="form-control layer-date" id="start_date" name="start_date"
                                       value="{$startTime}">
                                <label class="laydate-icon inline demoicon"
                                       onclick="laydate({elem: '#start_date'});"></label>
                                <input readonly class="form-control layer-date" id="end_date" name="end_date"
                                       value="{$endTime}">
                                <label class="laydate-icon inline demoicon"
                                       onclick="laydate({elem: '#end_date'});"></label>

                                <a class="btn btn-success btn-sm" v-on:click="changeTime"
                                   style="margin-bottom:0;margin-left:4px;margin-top: 15px;">筛选</a>
                                <a class="btn btn-primary btn-sm" style="margin-bottom:0;margin-top: 15px;" href="{:url('orderStatis')}"><i
                                        class="fa fa-filter"></i> 重置</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--搜索框结束-->
            <div class="hr-line-dashed"></div>

            <div class="example-wrap">
                <div class="example">
                    <div class="content" id="content" style="height: 500px;">
                    </div>
                </div>
                <!-- End Example Pagination -->
            </div>
        </div>
    </div>
    <!-- End Panel Other -->


</div>

{include file="public/footer" /}

<script>

    $(document).ready(function() {

        var app = new Vue({
            el: '#container',
            data: {
                startTime: "{$startTime}",
                endTime: "{$endTime}",
                courseId: ""
            },
            methods: {

                changeTime: function() {

                    app.startTime = $("input[name=start_date]").val();
                    app.endTime = $("input[name=end_date]").val();
                    app.courseId = $("select[name=course_id]").val();

                    setData();
                }
            }
        });

        var echartModel = echarts.init(document.getElementById('content'));

        function setData() {

            $.ajax({
                type: 'post',
                url: "{:url('orderStatisData')}",
                dataType: 'json',
                data: {
                    startTime: app.startTime,
                    endTime: app.endTime,
                    courseId: app.courseId
                },
                success: function (data) {

                    echartModel.setOption({
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: []
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar', 'pie']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: data["xData"]
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: data["yData"]
                    }, true);

                },
                error: function (data) {

                }
            })

        }

        setData();

    })


</script>
</body>
</html>
